﻿@{
    var category = HttpHelper.Get<ArticleCategoryDto>("/client/article/category/" + Model);
    if (category != null && !string.IsNullOrEmpty(category.Title))
    {
        ViewBag.PageTitle = category.Title + " - " + ViewBag.site.SeoTitle;
        ViewBag.PageKeyword = category.SeoKeyword;
        ViewBag.PageDescription = category.SeoDescription;
    }
    else
    {
        ViewBag.PageTitle = "资源列表 - " + ViewBag.site.SeoTitle;
        ViewBag.PageKeyword = ViewBag.site.SeoKeyword;
        ViewBag.PageDescription = ViewBag.site.SeoDescription;
    }
}
<!--分类菜单.开始-->
<div class="wrapper">
    <div class="location">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>资源下载</el-breadcrumb-item>
            <el-breadcrumb-item>资源列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="slider-nav">
        <div class="list-box">
            <span class="title">类别</span>
            <div class="list">
                <a @@click="handleCategoryChange(0)" :class="{active:categoryId===0}">全部</a>
                <a v-for="(item,index) in categoryList" :key="index" @@click="handleCategoryChange(item.id)" :class="{active:item.id===categoryId}">{{item.title}}</a>
            </div>
        </div>
        <div class="list-box">
            <span class="title">标签</span>
            <div class="list">
                <a @@click="handleLabelChange(0)" :class="{active:labelId===0}">全部</a>
                <a v-for="(item,index) in labelList" :key="index" @@click="handleLabelChange(item.id)" :class="{active:item.id===labelId}">{{item.title}}</a>
            </div>
        </div>
    </div>
</div>
<!--分类菜单.结束-->
<!--循环列表.开始-->
<div class="wrapper">
    <div class="down-list">
        <div v-if="listData.length===0" class="nodata">暂无查询到记录...</div>
        <a v-for="(item,index) in listData" :key="index" :href="'/down/show/'+item.id" class="list-box">
            <div class="img-box">
                <el-image :src="common.loadFile(item.imgUrl)" fit="cover"></el-image>
            </div>
            <div class="txt-box">
                <span class="title">{{item.title}}</span>
                <span class="info">{{item.zhaiyao}}</span>
                <div class="date">
                    <span class="icon iconfont icon-date">{{item.addTime}}</span>
                    <span class="icon iconfont icon-view">{{item.click}}次</span>
                </div>
            </div>
        </a>
    </div>

    <div class="pager-box">
        <el-pagination background
                       :hide-on-single-page="true"
                       @@current-change="handleCurrentChange"
                       :page-size="pageSize"
                       layout="prev, pager, next"
                       :total="totalCount">
        </el-pagination>
    </div>
</div>

@section Scripts{
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                totalCount: 0, //总数量
                pageSize: 12, //每页显示条数
                pageIndex: 1, //当前页码
                categoryId: @Model, //分类ID
                labelId: 0, //标签ID
                labelList: [], //标签列表
                categoryList: [], //分类列表
                listData: [],//数据列表
            },
            methods: {
                //加载列表
                async loadData() {
                    let _this = this;
                    let sendUrl = `/client/down/article?siteId=${$site}`;
                    sendUrl += "&categoryId=" + _this.categoryId;
                    sendUrl += "&labelId=" + _this.labelId;
                    sendUrl += "&pageSize=" + _this.pageSize;
                    sendUrl += "&pageIndex=" + _this.pageIndex;
                    //关健字
                    if (_this.common.param.keyword) {
                        sendUrl += "&keyword=" + encodeURI(_this.common.param.keyword);
                    }
                    AxiosAjax({
                        url: sendUrl,
                        loading: true,
                        success: function (res) {
                            _this.listData = res.data;
                            let pageInfo = JSON.parse(res.headers["x-pagination"]);
                            _this.totalCount = pageInfo.totalCount;
                            _this.pageSize = pageInfo.pageSize;
                            _this.pageIndex = pageInfo.pageIndex;
                        },
                        error: function (err) {
                            _this.listData = []
                        }
                    });
                },
                //初始化数据
                async initData() {
                    let _this = this;
                    //加载分类
                    AxiosAjax({
                        url: `/client/article/down/category?siteId=${$site}`,
                        success: function (res) {
                            _this.categoryList = res.data;
                        }
                    });
                    //加载标签
                    AxiosAjax({
                        url: `/client/article/label/view/0`,
                        success: function (res) {
                            _this.labelList = res.data;
                        }
                    });
                    //加载列表
                    _this.loadData();
                },
                //筛选类别
                handleCategoryChange(val) {
                    this.categoryId = val
                    this.pageIndex = 1
                    this.totalCount = 0
                    this.loadData()
                },
                //筛选标签
                handleLabelChange(val) {
                    this.labelId = val
                    this.pageIndex = 1
                    this.totalCount = 0
                    this.loadData()
                },
                //跳转到第几页
                handleCurrentChange: function (val) {
                    if (this.pageIndex != val) {
                        this.pageIndex = val;
                        this.loadData();
                    }
                },
            },
            created() {
                let labelId = parseInt(common.queryValue("label"));
                this.labelId = labelId ? labelId : 0;
                this.common.param.channelType = 4;
                this.common.param.keyword = this.common.queryValue("keyword");
                this.initData()
            }
        })
    </script>
}